<template>
  <div class="app-container">
    <div class="title">
      <h1>用户信息修改</h1>
    </div>
    <el-form label-width="120px" ref="userInfo" :model="loginInfo">
      <el-form-item
        label="用户昵称"
        :rules="[
          { required: true, message: '用户昵称不能为空', trigger: 'blur' },
        ]"
      >
        <el-input v-model="loginInfo.nickname" />
      </el-form-item>
      <el-form-item
        label="年龄"
        :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]"
      >
        <el-input-number
          v-model="loginInfo.age"
          controls-position="right"
          :min="0"
        />
      </el-form-item>

      <el-form-item
        label="性别"
        :rules="[{ required: true, message: '请选择性别', trigger: 'blur' }]"
      >
        <el-select v-model="loginInfo.sex" placeholder="性别">
          <el-option
            v-for="item in options"
            :key="item.sex"
            :label="item.label"
            :value="item.sex"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="个人签名">
        <el-input v-model="loginInfo.sign" :rows="10" type="textarea" />
      </el-form-item>

      <!-- 用户头像 -->
      <client-only>
        <el-form-item label="头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="loginInfo.avatar" />
          <!-- 文件上传按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            @click="imagecropperShow = true"
            >更换头像
          </el-button>
          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            :url="BASE_API + '/eduoss/fileoss'"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>
      </client-only>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import login from "@/api/login";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
import "@/assets/css/ucenter.less";

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      BASE_API: process.env.baseUrl,

      imagecropperShow: false,
      imagecropperKey: 0, //上传组件key值
      saveBtnDisabled: false, // 保存按钮是否禁用,
      loginInfo: {
        id: "",
        age: "",
        avatar: "",
        mobile: "",
        nickname: "",
        sign: "",
        sex: "",
      },
      options: [
        {
          sex: 1,
          label: "男",
        },
        {
          sex: 2,
          label: "女",
        },
      ],
    };
  },
  created() {
    this.initUcenter();
    console.log(this.loginInfo);
  },
  methods: {
    initUcenter() {
      login.getLoginUserInfo().then((response) => {
        this.loginInfo = response.data.data.userInfo;
      });
    },
    close() {
      //关闭上传弹框的方法
      this.imagecropperShow = false;
      //上传组件初始化
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    //上传成功方法
    cropSuccess(data) {
      this.imagecropperShow = false;
      //上传之后接口返回图片地址
      this.loginInfo.avatar = data.data.url;
      console.log("debug" + data.data.url);
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    // 保存用信息
    saveOrUpdate() {
      login.updateUcenter(this.loginInfo).then((response) => {
        this.$message.success("修改成功");
      });
    },
    // 点击保存触发验证
    checkSubmit() {
      this.$refs["userInfo"].validate((valid) => {
        if (valid) {
          this.saveOrUpdate();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
